<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <ul id='u1'>
        aaa
        <li>1</li>
        bbb
        <li>2</li>
        ccc
        <li>3</li>
        ddd
    </ul> -->
    <!-- <img src="../img/快乐加倍.png" id="img1" alt=""> -->
    <button onclick="cloneImg()">换图</button>

    <script>
        // let u1 = document.getElementById("u1")
        // console.log(u1);
        // let lis = u1.childNodes;
        // console.log(lis);
        // let fc =  u1.firstChild;
        // console.log(fc);
        // let ns = fc.nextSibling;
        // console.log(ns);

        // let lc =  u1.lastChild;
        // console.log(lc);
        // let ps = lc.previousElementSibling || ;
        // console.log(ps);
        // function change(){
        //     let img1 = document.getElementById("img1")
        //     console.log(img1.getAttribute("src"));
        //     img1.setAttribute("src","../img/java.png");
        //     console.log(img1.getAttribute("src"));
        // }
            function  createImg() {
                let img = document.createElement("img");
                img.setAttribute("src","../img/快乐加倍.png")
                img.setAttribute("id","img1")

                document.body.appendChild(img);
            }
            createImg();
            function cloneImg() {
                // document
                let img = document.getElementById("img1").cloneNode();
                console.log(img);
                document.body.appendChild(img);
            }
    </script>
</body>
</html>